<!-- 首页 -->
<template>
  <div>
    <global-header></global-header>
    <carousel></carousel>
    <div class="content-box">
      <content-nav></content-nav>
      <div style="margin: 20px auto;display: flex;justify-content: space-between;">
        <div style=" width: 260px;">
          <img
            src="https://images.mafengwo.net/images/safety-prevention/index-link.png"
            style="width: 218px;margin: 15px 0 20px;"
          />
          <template v-for="(item,i) in letListData">
            <letList
              :key="item.id"
              :dataList="item"
              :count="i"
              :num="letListData.length"
              :haveP="haveP"
              :indicatorNo="item.contentList.length > 1 ? '' : 'none'"
            ></letList>
          </template>

          <consult></consult>
        </div>
        <content-right></content-right>
      </div>
    </div>
    <Footer></Footer>
    <FooterEnd></FooterEnd>
    <back-top></back-top>
  </div>
</template>

<script>
import globalHeader from "@/components/GlobalHeader";
import carousel from "@/components/Home/carousel";
import contentNav from "@/components/Home/contentNav";
import contentRight from "@/components/Home/contentRight";
import letList from "@/components/Home/letList";
import consult from "@/components/Home/consult";
import Footer from "@/components/Footer";
import FooterEnd from "@/components/FooterEnd";
import {mapState} from 'vuex'
import backTop from '@/components/backTop'
export default {
  data() {
    return {
      haveP: []
    };
  },
  computed:{
    ...mapState(['letListData'])
    
  },
  methods: {
    name() {
      this.$store.dispatch('reqLetListData')
    }
  },
  watch:{
    letListData(){
      let arr = [];
      let i = 0;
      let longD = this.letListData.length;
      for (i; i < longD; i++) {
        let j = 0;
        let longC = this.letListData[i].contentList.length;
        for (j; j < longC; j++) {
          if (this.letListData[i].contentList[j].introduce !== "") {
            arr.push(i);
          }
        }
      }

      this.haveP = Array.from(new Set(arr));
    }
  },
  mounted() {
    this.name();
  },
  components: {
    globalHeader,
    carousel,
    contentNav,
    contentRight,
    letList,
    consult,
    Footer,
    FooterEnd,
    backTop
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.content-box {
  width: 1000px;
  margin: 20px auto;
}
</style>